<template>
  <Home />
</template>

<script>
import { checkVersion, unCheckVersion } from 'version-rocket'
import { onMounted, onUnmounted } from 'vue'
// import {version} from '../package.json'
import Home from './views/Home.vue'
import { getCurrentInstance } from 'vue'

export default {
  name: 'App',
  components: {
    Home
  },
  setup() {
    let version = ''
    onMounted(() => {
      const instance = getCurrentInstance()
      if(instance){
        version = instance.appContext.config.globalProperties.pkgVersion
      }
      const { NODE_ENV } = process.env;
      console.log('version',version)
      if (NODE_ENV === 'production') {
        checkVersion({
          pollingTime: 3 * 60000,  // 轮询监测的时间间隔, 单位 ms, 3分钟
          localPackageVersion: version,
          originVersionFileUrl: `${location.origin}/version.json`
        }, {
          title: '数采前端',
          description: `当前版本${version}`,
          buttonText: "刷新"
        })
      }
    })
    onUnmounted(() => {
      // 终止版本检测
      unCheckVersion({ closeDialog: false })
    });
  }

}

// 解决改变屏幕大小时el-table报错ResizeObserver loop
const debounce = (fn, delay) => {
  let timer
  return (...args) => {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn(...args)
    }, delay)
  }
}

const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor(callback) {
    callback = debounce(callback, 200);
    super(callback);
  }
}


</script>

<style>
@import "./assets/css/main.css";
@import './assets/css/index.css';

#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
}
</style>
